<template>
  <el-scrollbar height="100%">
      <el-container>
        <el-header style="height: 100px;width: 100%;background-color: #0f1827;">
          <div class="w">
            <div class="avatar">
              <el-avatar style="width: 80px;height: 80px;"
                         :src="avatarUrl"/>
            </div>
            <div class="content">
              <p style="font-size: 16px;font-weight: bolder">{{ nickname }}</p>
              <p style="font-size: 12px">{{ info }}</p>
            </div>
            <div class="back">
              <el-button type="primary" link
                         @click="goBack"
                         style="width: 80px;height: 40px;
                         font-size: 14px;">
                返回首页
              </el-button>
            </div>
          </div>
        </el-header>
       <div class="w">
         <el-container>
           <el-aside width="160px">
             <el-menu
                 default-active="/information"
                 unique-opened
                 router
             >
               <el-menu-item index="/information">
                 <el-icon size="16"><User /></el-icon>
                 <span style="font-size: 16px">个人信息</span>
               </el-menu-item>
               <el-menu-item index="changeAvatar">
                 <el-icon size="16"><Picture /></el-icon>
                 <span style="font-size: 16px">修改头像</span>
               </el-menu-item>
               <el-menu-item index="records">
                 <el-icon size="16"><VideoPause /></el-icon>
                 <span style="font-size: 16px">观看记录</span>
               </el-menu-item>
               <el-menu-item index="comments">
                 <el-icon size="16"><ChatDotSquare /></el-icon>
                 <span style="font-size: 16px">我的评论</span>
               </el-menu-item>
               <el-menu-item index="password">
                 <el-icon size="16"><Lock /></el-icon>
                 <span style="font-size: 16px">修改密码</span>
               </el-menu-item>
             </el-menu>
           </el-aside>
           <el-main style="height: calc(100vh - 100px);background-color: #fff;">
             <router-view/>
           </el-main>
         </el-container>
       </div>
      </el-container>



  </el-scrollbar>
</template>

<script setup>
import {computed} from "vue";
import router from "@/router";
import { useStore } from 'vuex';


const store = useStore();
const userAvatar = computed(() => store.getters.getUserAvatar);
const avatarUrl = computed(() => {
  return BASE_URL + (userAvatar.value ? userAvatar.value : getUser().avatar);
});
const userNickname = computed(() => store.getters.getUserNickname);
const nickname = computed(() => {
  return userNickname.value ? userNickname.value : getUser().nickname;
});
const userInfo = computed(() => store.getters.getUserInfo);
const info = computed(() => {
  return userInfo.value ? userInfo.value : getUser().info;
});
const goBack = () => {
 router.push('/')
}
</script>

<style scoped>
.avatar {
  float: left;
  margin-top: 10px;
}
.content {
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  p {
    color: #FFFFFF;
    margin: 15px;
  }
}
.back {
  float: right;
  margin-top: 30px;
}
</style>
